<!-- 碳排放排行 -->
<template>
  <div class="rank_container">
    <div class="title"></div>
    <div class="box">
      <ul>
        <li>
          <div class="city">广州</div>
          <div class="guangzhou"></div>
          <div class="number">3267</div>
        </li>
        <li>
          <div class="city">深圳</div>
          <div class="shenzhen"></div>
          <div class="number">5145</div>
        </li>
        <li>
          <div class="city">东莞</div>
          <div class="dongguan"></div>
          <div class="number">1256</div>
        </li>
        <li>
          <div class="city">珠海</div>
          <div class="zhuhai"></div>
          <div class="number">2451</div>
        </li>
        <li>
          <div class="city">肇庆</div>
          <div class="zhaoqing"></div>
          <div class="number">3145</div>
        </li>
        <li>
          <div class="city">中山</div>
          <div class="zhongshan"></div>
          <div class="number">1466</div>
        </li>
        <li>
          <div class="city">佛山</div>
          <div class="foshan"></div>
          <div class="number">3644</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts"></script>
<style lang="scss" scoped>
.rank_container {
  display: flex;
  flex-direction: column;
  .title {
    // margin-top: 5px;
    width: 444px;
    height: 66px;
    background: url(../../../../assets/svg/tanpaifang.svg) no-repeat;
  }
  .box {
    width: 432px;
    height: 190px;
    // background-color: #fff;
    margin-left: 21px;
    margin-top: 12px;
    .city {
      width: 66px;
      height: 18px;
      background-color: #0a5eac;
      text-align: center;
      color: #d2e0f1;
      font-family:
        Alibaba PuHuiTi 2,
        Alibaba PuHuiTi 20;
      font-size: 10px;
      line-height: 18px;
      letter-spacing: 3px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      justify-content: space-between;
      // li {
      //    display: flex;
      //  }
    }
  }

  .box ul li {
    display: flex;
    .guangzhou {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-repeat: no-repeat;
      background-image: url(../../../../assets/svg/guangzhou.svg);
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
      transform: all 0.3;
    }
    .shenzhen {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-repeat: no-repeat;
      background-image: url(../../../../assets/svg/shenzhen.svg);
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .dongguan {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-image: url(../../../../assets/svg/dongguan.svg);
      background-repeat: no-repeat;
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .zhuhai {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-image: url(../../../../assets/svg/zhuhai.svg);
      background-repeat: no-repeat;
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .zhaoqing {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-image: url(../../../../assets/svg/zhaoqing.svg);
      background-repeat: no-repeat;
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .zhongshan {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-image: url(../../../../assets/svg/zhongshan.svg);
      background-repeat: no-repeat;
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .foshan {
      width: 311px;
      height: 18px;
      background: rgba(15, 91, 129, 0.51);
      background-image: url(../../../../assets/svg/foshan.svg);
      background-repeat: no-repeat;
      // background-size: contain;
      // background: linear-gradient( 90deg, #082356 0%, #11A5BC 100%);
    }
    .number {
      margin-left: 19px;
      width: 38px;
      height: 22px;
      font-size: 16px;
      color: #d2e0f1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
.guangzhou,
.shenzhen,
.dongguan,
.zhuhai,
.zhaoqing,
.zhongshan,
.foshan {
  animation: fadeIn 2s ease-in-out forwards;
}
.number {
  animation: slideInRight 2s ease-in-out forwards;
}
</style>
